<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(v,k,i) in obj1">{{k}} {{v}}</li>
			</ul>
			<button type="button" @click="change()">修改原有属性</button>
			<button type="button" @click="add()">添加属性</button>
			<button type="button" @click="delete1()">删除属性</button>
			<button type="button" @click="tihuan()">替换对象</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					obj1:{
						name:"ljh",
						age:22,
						sex:"man",
						iphone:"Mi"
					}
				},
				methods:{
					change(){
						this.obj1.name="秀钩"
					},
					add(){
						// this.obj1.gongju="铁锹"
						/* 第一种方法 */
						// this.obj1={...this.obj1}
						/* 第二种方法 */
						// Vue.set(this.obj1,"gongju","铁锹");
						this.$set(this.obj1,"gongju","铁锹");
					},
					delete1(){
						// delete this.obj1.iphone;
						/* 第一种方法 */
						// this.obj1={...this.obj1}
						/* 第二种方法 */
						// Vue.delete(this.obj1,"iphone");
						this.$delete(this.obj1,"iphone");
					},
					tihuan(){
						let obj2={
							name:"ljh2",
							age:22,
							sex:"man",
							iphone:"Mi",
							jiahuo:"铲子"
						}
						this.obj1=obj2;
					}
				}
			})
		</script>
	</body>
</html>
